﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input
              v-model="listQuery.name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('business.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="listQuery.linkman"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('public.linkman')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="listQuery.mobile"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('public.mobile')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <div
            class="search-button"
            @click="handleFilter"
          >
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div
            class="search-button"
            @click="handleRefresh"
          >
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
          <div
            class="search-button"
            @click="searchItem"
          >
            <img
              v-show="showSearchItem === true"
              src="@/assets/images/bg_more@2x.png"
            />
            <img
              v-show="showSearchItem === false"
              src="@/assets/images/bg_sx@2x.png"
            />
          </div>
        </el-form>
      </div>
      <div
        v-show="showSearchItem"
        class="filter-container"
      >
        <el-form>
          <el-form-item>
            <drop-down-select
              widthData="160px"
              optionName="region_name"
              :data="areaOptions"
              :count="areaCount"
              :pageSize="pageSize"
              :id="listQuery.region_id"
              :name="listQuery.region_name"
              :placeholder="$t('public.region')"
              @getList="(pageNumber, search)=>{return getArea(pageNumber, search,'getArea')}"
              @addList="(pageNumber, search)=>{return getArea(pageNumber, search,'addArea')}"
              @choose="chooseArea"
              @remove="removeArea"
            ></drop-down-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255,0.2)"
        border
        fit
        highlight-current-row
        style="width: 100%min-height:1000px"
      >
        <el-table-column
          fixed="left"
          align="center"
          :label="$t('table.id')"
          width="65"
        >
          <template slot-scope="scope">
            <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('business.name')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('public.trade')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.trade_name1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('public.region')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.region_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('public.linkman')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.linkman }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('public.mobile')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          :label="$t('public.registrationTime')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('public.status')"
        >
          <template slot-scope="scope">
            <span :class="statusColor(scope.row.status)">{{ merchantStatusEs(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('table.actions')"
          class-name="operat-button"
          fixed="right"
        >
          <template slot-scope="scope">
            <div
              class="read-img"
              @click="handleRead(scope.row)"
            >
              <img src="@/assets/images/read@2x.png" />
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10,20,30,50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          ref="dataForm"
          label-position="right"
          label-width="35%"
          style="width: 400px margin-left:120px"
          size="small"
        >
          <div class="pops">
            <div class="information-title">
              <span class="icon-title"></span>
              <span>基础信息:</span>
            </div>
            <div class="pops-item">
              <div class="pops-left">
                <el-form-item :label="$t('business.name')+' :'">
                  <el-input
                    v-model="temp.name"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('public.trade')+' :'">
                  <el-input
                    v-model="temp.trade_name1"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('region.name')+' :'">
                  <el-input
                    v-model="temp.region_name"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('public.address')+' :'">
                  <el-input
                    v-model="temp.address"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>

              </div>
              <div class="pops-right">
                <el-form-item :label="$t('public.linkman')+' :'">
                  <el-input
                    v-model="temp.linkman"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('public.mobile')+' :'">
                  <el-input
                    v-model="temp.mobile"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('public.tradeRefuse')+' :'">
                  <el-input
                    v-model="temp.trade_name"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>

                <el-form-item :label="$t('public.creationTime')+' :'">
                  <el-input
                    v-model="temp.created_at"
                    :readonly="dialogStatus=='read'?true:false"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth"; // get token from cookie
export default {
  name: "Merchant",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        linkman: "",
        mobile: "",
        region_id: "",
        region_name: ""
      },
      temp: {
        id: undefined,
        name: "",
        region_name: "",
        address: "",
        linkman: "",
        mobile: "",
        status: undefined,
        trade_name1: "",
        reject_trade_ids: "",
        openid: undefined,
        trade_name: ""
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      areaOptions: [],
      areaCount: undefined,
      pageSize: 10
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        name: "",
        linkman: "",
        mobile: "",
        region_id: undefined,
        region_name: ""
      };
      this.getList();
    },
    searchItem() {
      if (this.showSearchItem === true) {
        this.showSearchItem = false
      } else {
        this.showSearchItem = true
      }
    },
    // 获取商家列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        name: this.listQuery.name ? this.listQuery.name : "",
        linkman: this.listQuery.linkman ? this.listQuery.linkman : "",
        mobile: this.listQuery.mobile ? this.listQuery.mobile : "",
        region_name: this.listQuery.region_name ? this.listQuery.region_name : ""
      };
      const path = {
        app: "archives",
        api: "api_archives_merchant_getList",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 打开查看弹窗
    handleRead(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormVisible = true;
    },
    // 获取区域列表
    getArea(pageNumber, search, name) {
      const path = {
        app: "archives",
        api: "api_archives_region_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          region_name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    chooseArea(data) {
      this.listQuery.region_id = data.region_id;
      this.listQuery.region_name = data.region_name;
    },
    removeArea() {
      this.listQuery.region_id = undefined;
      this.listQuery.region_name = "";
    },
    chooseTrade(data) {
      this.listQuery.trade_id = data.id;
      this.listQuery.trade_name = data.name;
    },
    removeTrade() {
      this.listQuery.trade_id = undefined;
      this.listQuery.trade_name = "";
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_archives_merchant_getList") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "api_archives_region_getList" && resj.type === "getArea") {
            this.areaOptions = resj.data;
            this.areaCount = resj.count;
          } else if (resj.api === "api_archives_region_getList" && resj.type === "addArea") {
            this.areaOptions = this.areaOptions.concat(resj.data);
          }
        }
      }
    }
  }
};
</script>
